﻿<!doctype html>
<html>
    <head>
    <title>SpreadJS - Sparkline Setting</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>

    <style type="text/css">
    /*css_begin*/
        label {
            display:inline-block;
            width: 160px;
            margin-right: 12px;
            text-align:right;
        }

        input[type="checkbox"] {
            margin-left: 20px;
        }

        input[type="checkbox"] + label {
            width: auto;
            text-align:left;
        }

        input[type="text"] {
            width: 100px;
        }

        select {
            width: 104px;
        }

        input[type="button"] {
            width: 120px;
            margin-right: 60px;
            margin-left: 60px;
        }
    /*css_end*/
    </style>

    <script id="scriptInit" type="text/javascript">
    /*code_begin*/
    $(document).ready(function () {
        var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"));
        initSpread(spread);
    });

    function initSpread(spread) {
        var spreadNS = GcSpread.Sheets;

        var sheet = spread.getSheet(0);
        sheet.isPaintSuspended(true);

        sheet.allowCellOverflow(true);

        sheet.setValue(0, 0, "Data Range is A2-A9");
        sheet.setValue(1, 0, 1);
        sheet.setValue(2, 0, -2);
        sheet.setValue(3, 0, -1);
        sheet.setValue(4, 0, 6);
        sheet.setValue(5, 0, 4);
        sheet.setValue(6, 0, -4);
        sheet.setValue(7, 0, 3);
        sheet.setValue(8, 0, 8);

        sheet.setValue(0, 1, "Data Range is A2-A9");
        sheet.setValue(1, 1, 1);
        sheet.setValue(2, 1, 3);
        sheet.setValue(3, 1, -1);
        sheet.setValue(4, 1, 6);
        sheet.setValue(5, 1, -4);
        sheet.setValue(6, 1, 4);
        sheet.setValue(7, 1, -2);
        sheet.setValue(8, 1, 8);

        sheet.setValue(0, 3, "Date axis range is C2-C9");
        sheet.setValue(1, 3, new Date(2011, 0, 5));
        sheet.setValue(2, 3, new Date(2011, 0, 1));
        sheet.setValue(3, 3, new Date(2011, 1, 11));
        sheet.setValue(4, 3, new Date(2011, 2, 1));
        sheet.setValue(5, 3, new Date(2011, 1, 1));
        sheet.setValue(6, 3, new Date(2011, 1, 3));
        sheet.setValue(7, 3, new Date(2011, 2, 6));
        sheet.setValue(8, 3, new Date(2011, 1, 19));

        var data = new spreadNS.Range(1, 0, 8, 1);
        var dateAxis = new spreadNS.Range(1, 3, 8, 1);

        sheet.getCell(9, 0).text("Sparkline with dateAxis:");

        sheet.getCell(10, 0).text("(1) Line");
        sheet.getCell(10, 3).text("(2)Column");
        sheet.getCell(10, 6).text("(3)Winloss");

        //line
        sheet.addSpan(11, 0, 4, 3);
        var setting = new spreadNS.SparklineSetting();
        setting.showMarkers(true);
        setting.displayXAxis = true;
        setting.showFirst(true);
        setting.showLast(true);
        setting.showLow(true);
        setting.showHigh(true);
        setting.showNegative(true);
        sheet.setSparkline(11, 0, data
                , spreadNS.DataOrientation.Vertical
                , spreadNS.SparklineType.line
                , setting
                , dateAxis
                , spreadNS.DataOrientation.Vertical
        );

        //column
        sheet.addSpan(11, 3, 4, 3);
        setting = new spreadNS.SparklineSetting();
        setting.displayXAxis = true;
        setting.showFirst(true);
        setting.showLast(true);
        setting.showLow(true);
        setting.showHigh(true);
        setting.showNegative(true);
        sheet.setSparkline(11, 3, data
                , spreadNS.DataOrientation.Vertical
                , spreadNS.SparklineType.column
                , setting
                , dateAxis
                , spreadNS.DataOrientation.Vertical
        );

        //winloss
        sheet.addSpan(11, 6, 4, 3);
        setting = new spreadNS.SparklineSetting();
        setting.displayXAxis = true;
        setting.showNegative(true);
        sheet.setSparkline(11, 6, data
                , spreadNS.DataOrientation.Vertical
                , spreadNS.SparklineType.winloss
                , setting
                , dateAxis
                , spreadNS.DataOrientation.Vertical
        );

        sheet.isPaintSuspended(false);

        function getActualRange(range, maxRowCount, maxColCount) {
            var row = range.row < 0 ? 0 : range.row;
            var col = range.col < 0 ? 0 : range.col;
            var rowCount = range.rowCount < 0 ? maxRowCount : range.rowCount;
            var colCount = range.colCount < 0 ? maxColCount : range.colCount;

            return new spreadNS.Range(row, col, rowCount, colCount);
        }

        function findSparkLine(sheet, range) {
            var row = range.row, col = range.col,
                rowCount = range.rowCount, colCount = range.colCount;

            for (var i = 0; i < rowCount; i++) {
                for (var j = 0; j < colCount; j++) {
                    var sparkline = sheet.getSparkline(row + i, col + j);
                    if (sparkline != null) {
                        return sparkline;
                    }
                }
            }

            return null;
        }

        $("#btnGetSetting").click(function () {
            var sheet = spread.getActiveSheet();

            sheet.isPaintSuspended(true);
            var sels = sheet.getSelections();

            if (sels && sels.length > 0) {
                var sel = getActualRange(sels[0], sheet.getRowCount(), sheet.getColumnCount());

                var sparkline = findSparkLine(sheet, sel);

                if (sparkline != null) {
                    getSparklineSettings(sparkline);
                }
            }
            sheet.isPaintSuspended(false);
        });
        $("#btnChangeSetting").click(function () {
            var sheet = spread.getActiveSheet();

            sheet.isPaintSuspended(true);
            var sels = sheet.getSelections();
            var setting = new spreadNS.SparklineSetting();
            var sparklineType = parseInt($("#sparklinetype").find("option:selected").val(), 10);

            if (sels && sels.length > 0) {
                var sel = getActualRange(sels[0], sheet.getRowCount(), sheet.getColumnCount());

                var sparkline = findSparkLine(sheet, sel);

                if (sparkline != null) {
                    sparkline.setting(buildSparklineSettings(setting));
                    sparkline.sparklineType(sparklineType);
                }
            }

            sheet.isPaintSuspended(false);
        });

        function getSparklineSettings(sparkline) {
            var setting = sparkline.setting();
            $("#sparklinetype").find("option[value='" + (+sparkline.sparklineType()) + "']").attr("selected", "selected");

            $("#firstMarkerColor").attr('value', setting.firstMarkerColor());

            $("#highMarkerColor").attr('value', setting.highMarkerColor());
            $("#lastMarkerColor").attr('value', setting.lastMarkerColor());
            $("#lowMarkerColor").attr('value', setting.lowMarkerColor());
            $("#negativeMarkerColor").attr('value', setting.negativeColor());
            $("#markersColor").attr('value', setting.markersColor());
            $("#AxisColor").attr('value', setting.axisColor());
            $("#SeriesColor").attr('value', setting.seriesColor());

            $("#showFirst").attr("checked", setting.showFirst());
            $("#showHigh").attr("checked", setting.showHigh());
            $("#showLast").attr("checked", setting.showLast());
            $("#showLow").attr("checked", setting.showLow());
            $("#showNegative").attr("checked", setting.showNegative());
            $("#showMarkers").attr("checked", setting.showMarkers());

            $("#displayXAxis").attr("checked", setting.displayXAxis);
        }
        function buildSparklineSettings(setting) {
            if (setting == null) setting = new spreadNS.SparklineSetting();
            $("#firstMarkerColor").each(function () {
                if (this.value != "(none)")
                    setting.firstMarkerColor(this.value);
            });
            $("#highMarkerColor").each(function () {
                if (this.value != "(none)")
                    setting.highMarkerColor(this.value);
            });
            $("#lastMarkerColor").each(function () {
                if (this.value != "(none)")
                    setting.lastMarkerColor(this.value);
            });
            $("#lowMarkerColor").each(function () {
                if (this.value != "(none)")
                    setting.lowMarkerColor(this.value);
            });
            $("#negativeMarkerColor").each(function () {
                if (this.value != "(none)")
                    setting.negativeColor(this.value);
            });
            $("#markersColor").each(function () {
                if (this.value != "(none)")
                    setting.markersColor(this.value);
            });
            $("#AxisColor").each(function () {
                if (this.value != "(none)")
                    setting.axisColor(this.value);
            });
            $("#SeriesColor").each(function () {
                if (this.value != "(none)")
                    setting.seriesColor(this.value);
            });

            setting.showFirst($("#showFirst").prop("checked"));
            setting.showHigh($("#showHigh").prop("checked"));
            setting.showLast($("#showLast").prop("checked"));
            setting.showLow($("#showLow").prop("checked"));
            setting.showNegative($("#showNegative").prop("checked"));
            setting.showMarkers($("#showMarkers").prop("checked"));

            setting.displayXAxis = ($("#displayXAxis").prop("checked"));

            return setting;
        }
    }
    /*code_end*/
    </script>

    </head>
    <body>
    <div class="sample-turtorial">
        <div id="ss" style="width:100%; height:340px;border: 1px solid gray;"></div>
        <div class="demo-options">
            <div class="option-row">
                <input id='btnGetSetting' type='button' value='Get Setting' />
                <input id='btnChangeSetting' type='button' value='Change Setting' />
            </div>
            <div class="option-row">
                <label for="sparklinetype">Type:</label>
                <select id="sparklinetype">
                    <option value="0">line</option>
                    <option value="1">column</option>
                    <option value="2">winloss</option>
                </select>
            </div>
            <div class="option-row">
                <label for="firstMarkerColor">First Marker Color</label>
                <input id='firstMarkerColor' type='text' value="(none)" />
                <input id='showFirst' type='checkbox'/>
                <label for="showFirst">showFirst</label>
            </div>
            <div class="option-row">
                <label for="highMarkerColor">High Marker Color</label>
                <input id='highMarkerColor' type='text' value="Blue" />

                <input id='showHigh' type='checkbox'/>
                <label for="showHigh">showHigh</label>

            </div>
            <div class="option-row">
                <label for="lastMarkerColor">Last Marker Color</label>
                <input id='lastMarkerColor' type='text' value="(none)" />
                <input id='showLast' type='checkbox'/>
                <label for="showLast">showLast</label>
            </div>
            <div class="option-row">
                <label for="lowMarkerColor">Low Marker Color</label>
                <input id='lowMarkerColor' type='text' value="Blue" />
                <input id='showLow' type='checkbox'/>
                <label for="showLow">showLow</label>
            </div>
            <div class="option-row">
                <label for="negativeMarkerColor">Negative Marker Color</label>
                <input id='negativeMarkerColor' type='text' value="Brown" />
                <input id='showNegative' type='checkbox'/>
                <label for="showNegative">showNegative</label>
            </div>
            <div class="option-row">
                <label for="markersColor">Markers Color</label>
                <input id='markersColor' type='text' value="(none)" />
                <input id='showMarkers' type='checkbox'/>
                <label for="showMarkers">showMarkers</label>
            </div>
            <div class="option-row">
                <label for="AxisColor">Axis Color</label>
                <input id='AxisColor' type='text' value="Black" />
                <input type="checkbox" id="displayXAxis" checked/>
                <label for="displayXAxis">displayXAxis</label>
            </div>
            <div class="option-row">
                <label for="SeriesColor">SeriesColor</label>
                <input id='SeriesColor' type='text' value="(none)" />
            </div>
        </div>
    </div>
    </body>
</html>
